<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script setup lang="ts">
// import '@vue-flow/controls'
import { Background } from "@vue-flow/background";
import {
  // Panel,
  Position,
  Handle as VFHandle,
  VueFlow,
  useVueFlow,
} from "@vue-flow/core";
import type {
  EdgeMouseEvent,
  GraphEdge,
  Connection as VFConnection,
  Edge as VFEdge,
  Node as VFNode,
} from "@vue-flow/core";

const { updateEdge, addEdges, setInteractive } = useVueFlow();

const nodes = shallowRef<VFNode[]>([
  {
    id: "vf1",
    type: "input",
    label: "标题",
    position: { x: 250, y: 0 },
    // targetPosition: Position.Left,
    // sourcePosition: Position.Right,
  },
  {
    id: "vf2",
    label: "中间1",
    position: { x: 100, y: 100 },
    // targetPosition: Position.Left,
    sourcePosition: Position.Right,
  },
  {
    id: "vf3",
    label: "中间2",
    position: { x: 400, y: 100 },
    targetPosition: Position.Left, // input
    // sourcePosition: Position.Right,// output
    style: {
      background: "#D6D5E6",
      color: "#333",
      border: "1px solid #222138",
      width: 180,
    },
    isValidSourcePos: connection => connection.target.includes("1"),
  },
  {
    id: "vf4",
    label: "结束",
    type: "output",
    position: { x: 250, y: 200 },
    // sourcePosition: Position.Right,// output

    isValidSourcePos: connection => connection.target.includes("1"),
  },
]);

const edges = shallowRef<VFEdge[]>([
  {
    id: "e1-2",
    source: "vf1",
    target: "vf2",
    // label: "Updatable edge",
    updatable: true,
    animated: true,
    // type: "smoothstep",
  },
  {
    id: "e2-3",
    source: "vf2",
    target: "vf3",
    updatable: true,
    animated: true,
    type: "smoothstep",
  },
  {
    id: "e3-4",
    source: "vf3",
    target: "vf4",
    updatable: true,
    animated: true,
  },
]);

function onEdgeUpdateStart(edge: EdgeMouseEvent) {
  console.log("start update", edge);
}

function onEdgeUpdateEnd(edge: EdgeMouseEvent) {
  console.log("end update", edge);
}

function onEdgeUpdate({
  edge,
  connection,
}: {
  edge: GraphEdge
  connection: VFConnection
}) {
  updateEdge(edge, connection);
}

function onConnect(conn: unknown) {
  console.log("conn");
  (conn as VFEdge).animated = true;
  (conn as VFEdge).updatable = true;
  addEdges([conn as VFConnection]);
}
const isHidden = ref(false);

watch(isHidden, () => {
  nodes.value = nodes.value.map(node => ({
    ...node,
    hidden: isHidden.value,
  }));
  edges.value = edges.value.map(edge => ({
    ...edge,
    hidden: isHidden.value,
  }));
});
// watch(isHidden, () => {
//   console.log(
//     "edges",
//     superjson.parse(sessionStorage.getItem("saved-flow") as string),
//   );
// });
// setInteractive(false);
</script>

<template>
  <VueFlow
    :nodes="nodes"
    :edges="edges"
    fit-view-on-init
    @edge-update="onEdgeUpdate"
    @connect="onConnect"
    @edge-update-start="onEdgeUpdateStart"
    @edge-update-end="onEdgeUpdateEnd"
    @update:edges="
      (value) => {
        console.log('Vflow update edge', value);
      }
    "
  >
    <Background />
    <template #node-custominput="props">
      <div>Only connectable with B</div>
      <VFHandle
        type="source"
        :position="Position.Right"
        :is-valid-connection="props.isValidTargetPos"
      />
    </template>
  </VueFlow>
</template>

<style scoped>
/* in bundle */
/* @import "https://cdn.jsdelivr.net/npm/@vue-flow/core@1.33.1/dist/style.css";
@import "https://cdn.jsdelivr.net/npm/@vue-flow/core@1.33.1/dist/theme-default.css";
@import "https://cdn.jsdelivr.net/npm/@vue-flow/controls@latest/dist/style.css";
@import "https://cdn.jsdelivr.net/npm/@vue-flow/minimap@latest/dist/style.css";
@import "https://cdn.jsdelivr.net/npm/@vue-flow/node-resizer@latest/dist/style.css"; */

.vue-flow__minimap {
  transform: scale(75%);
  transform-origin: bottom right;
}
</style>
